<template>
  <div class="form-list">
    <div class="form-head">
      <h4>变更许可人/被许可人名称备案表</h4>
    </div>
    <div class="form-content">
      <el-form :label-positon="labelPosition" label-width="280px" size="mini">
        <!-- 许可人名称 -->
        <el-form-item label="许可人名称(中文)：">
          <span>{{ formData.licensorsCh }}</span>
        </el-form-item>
        <el-form-item label="(英文)：">
          <span>{{ formData.licensorsEn }}</span>
        </el-form-item>

        <!-- 许可人地址 -->
        <el-form-item label="许可人地址(中文)：">
          <span>{{ formData.addrCh }}</span>
        </el-form-item>
        <el-form-item label="(英文)：">
          <span>{{ formData.addrEn }}</span>
        </el-form-item>
        <div class="mar" v-if="formData.licenseeType==0||formData.licenseeType==1">
          <el-form-item label="许可人营业执照：">
            <span>
              <imgshow>
                <img :src="mconfig.host+formData.businessLicense" alt />
              </imgshow>
            </span>
          </el-form-item>
        </div>
        <div class="mar" v-if="formData.licenseeType==9">
          <el-form-item label="许可人其他证件：">
            <span>
              <imgshow>
                <img :src="mconfig.host+formData.businessLicense" alt />
              </imgshow>
            </span>
          </el-form-item>
        </div>
        <div class="mar">
          <el-form-item label="许可人身份证正反面：" v-if="formData.iddbimage">
            <span>
              <imgshow>
                <img  :src="mconfig.host+formData.iddbimage" alt />
              </imgshow>
            </span>
          </el-form-item>
        </div>

        <!-- 邮政编码 -->
        <el-form-item label="邮政编码：">
          <span>{{ formData.postCode }}</span>
        </el-form-item>

        <!-- 联系人 -->
        <el-form-item label="联系人：">
          <span>{{ formData.contacts }}</span>
        </el-form-item>

        <!-- 电子邮箱 -->
        <el-form-item label="邮箱：">
          <span>{{ formData.email }}</span>
        </el-form-item>

        <!-- 电话 -->
        <el-form-item label="电话：">
          <span>{{ formData.phone }}</span>
        </el-form-item>

        <!-- 代理机构名称 -->
        <el-form-item label="代理机构名称：">
          <span>{{ formData.deptName }}</span>
        </el-form-item>

        <!-- 商标注册号 -->
        <el-form-item label="商标注册号：">
          <span>{{ formData.appCode }}</span>
        </el-form-item>

        <!-- 是否共有商标 -->
        <el-form-item label="是否共用商标：">
        
          <span v-if="formData.commStaus!=0">是</span>
          <span v-if="formData.commStaus==0">否</span>
        </el-form-item>

        <!-- 备案号 -->
        <el-form-item label="备案号：">
          <span>{{ formData.recordNo }}</span>
        </el-form-item>

        <!-- 变更前许可人名称 -->
        <el-form-item label="变更前许可人名称(中文)：">
          <span>{{ formData.befLicensorsCh }}</span>
        </el-form-item>
        <el-form-item label="(英文)：">
          <span>{{ formData.befLicensorsEn }}</span>
        </el-form-item>

        <!-- 变更前被许可人名称 -->
        <el-form-item label="变更前被许可人名称(中文)：">
          <span>{{ formData.befLicenseesCh }}</span>
        </el-form-item>
        <el-form-item label="(英文)：">
          <span>{{ formData.befLicenseesEn }}</span>
        </el-form-item>

        <!-- 变更后被许可人名称 -->
        <el-form-item label="变更后被许可人名称(中文)：">
          <span>{{ formData.aftLicensorsCh }}</span>
        </el-form-item>
        
        <el-form-item label="(英文)：">
          <span>{{ formData.aftLicensorsEn }}</span>
        </el-form-item>
        <div class="mar">
          <el-form-item  label="营业执照："  >
            <span>
              <imgshow>
                <img :src="mconfig.host+formData.busimg" alt />
              </imgshow>
            </span>
          </el-form-item>
        </div>
        <div class="mar">
          <el-form-item label="身份证(正反)：" v-if="formData.idcardimg">
            <span>
              <imgshow>
                <img  :src="mconfig.host+formData.idcardimg" alt />
              </imgshow>
            </span>
          </el-form-item>
        </div>
        
        <el-form-item label="网上确认书：">
          <span>
            <imgshow>
              <img :src="mconfig.host+formData.qrfile" alt />
            </imgshow>
          </span>
        </el-form-item>
        <!--<el-form-item class="mar" label="其他附件 :" v-if="formData.otherfile != []">-->
        <el-form-item class="mar" label="其他附件 :" v-if="formData.otherfile.length>0">
            <imgshow v-for="(item,index) in formData.otherfile" :key="index">
            <span class=""><img :src="mconfig.host+item" ></span>
            </imgshow>
        </el-form-item>
      </el-form>
     
    </div>
    <!-- v-if="commArr.length"  -->
    <div class="Licensor" v-if="commArr.length">
      <div class="tit">
        <h1>变更许可人/被许可人名称备案表</h1>
        <p>(附页)</p>
        <p>其他共有许可人：</p>
      </div>
      <proAppend class="part" :callback="commArr"></proAppend>
    </div>
  </div>
</template>

<script>
import imgshow from "../common/imgshow";
import proAppend from "../common/proAppend"
export default {
  components: {
    imgshow,proAppend
  },
  data() {
    return {
      // 变更许可人/被许可人名称备案
      // 右对齐
      labelPosition: "right",
      commArr: [],
      // 字段名
      formData: {
        addrCh: "", // 许可人地址(中文)
        addrEn: "", // 许可人地址(英文)
        aftLicensorsCh: "", // 变更后被许可人名称(中文)
        aftLicensorsEn: "", // 变更后被许可人名称（英文）
        appCode: "", // 商标注册号
        befLicenseesCh: "", // 变更前被许可人名称（中文）
        befLicenseesEn: "", // 变更前被许可人名称（英文）
        befLicensorsCh: "", // 变更前许可人名称（中文）
        befLicensorsEn: "", // 变更前许可人名称（英文）
        branchNetworkId: "", // 网点编号
        postCode: "", // 邮政编码
        commStaus: [], // 是否共有商标
        contacts: "", // 联系人
        email:"",//电子邮箱
        id: "", // 主键
        imgPath: "", // 上传图片地址
        licensorsCh: "", // 许可人名称（中文)
        licensorsEn: "", // 许可人名称(英文)
        nameAgen: "", // 代理机构名称
        phone: "", // 电话
        proAppendJson: "", // 共享人json
        recordNo: "", // 备案号
        subStatus: "1", // 状态
        userId: "", // 用户id
        idcardimg: "",
        businessLicense:"",
        iddbimage:"",
        licenseeType:"",
        otherfile:[]
      },
    };
  },
  methods: {
    funb(s) {
      this.$http
        .get("/trademark/proTChLicensors/findByIdDetl", {
          params: { id: s },
        })
        .then((res) => {
          // console.log(res);
          this.formData = res.data.data.data;
          this.formData.commStaus = [this.formData.commStaus];
          this.formData.otherfile = JSON.parse(this.formData.otherfile);
          this.commArr = res.data.data.append;
          this.busimg = res.data.data.data.busimg;
          this.idcardimg = res.data.data.data.idcardimg;
          // this.iDAddress = res.data.data.data.iDAddress;
        });
    },
  },
  mounted() {
    this.id = this.$route.query.id;
    this.funb(this.id);
  },
};
</script>
<style lang=less scoped>
.mar{
  margin-bottom: 20px;
}
.Licensor{
  margin-left: 260px;
}
.tit{
  padding-left: 100px;
}
.tit h1{
  font-size: 20px ;
  font-weight: 600;
}
.tit p:nth-child(2){
  margin-top: 10px;
  font-size: 18px;
}
.tit p{
  line-height: 30px;
  font-size: 15px;
}
.form-sty {
  display: inline-block;
}
/* .form-head-box {
} */
.form-head {
  margin-left:300px;
}
.form-head h4 {
  font-size: 25px;
  padding: 25px 0;
  font-weight: 600;
}
.form-head h1 {
  font-size: 20px;
  font-weight: 600;
}


.form-content {

  margin-left: 200px;
}

.form-list  .el-form-item__label {

  height: 30px;
}



.form-list ::v-deep .el-form-item {
  margin: 0;
}



.same-line {
  display: flex;
  justify-content: space-between;
}

.same-line .sign {
  font-size: 18px;
  color: rgb(191, 191, 191);
}

.same-line .el-form-item {
  width: 50%;
}

.same-line-s {
  display: flex;
  justify-content: space-between;
}

.same-line-s /deep/ .el-checkbox {
  width: 50%;
  text-align: left;
}



.img-box {
  width: 150px;
  height: 150px;
  display: flex;
}


.form-list .signs .el-row {
  margin: 150px 0;
}

.form-list .el-row .el-col {
  text-align: left;
}

.form-list .el-row .el-col span {
  font-size: 18px;
}
.follower-list {
  margin-left: -56px;
  color: #606266;
  font-size: 18px;
  margin-bottom: 20px;
}
.folloerstyle {
  width: 350px;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  margin-left: 158px;
}
.folloerstyle img {
  width: 100%;
  height: 100%;
}
.folloerstyle-sty {
  width: 300px;
  margin-left: 210px;
  display: flex;
  justify-content: center;
  /* border:1px solid red; */
}

.idcar img {
  width: 100%;
  height: 100%;
  margin-left: 10px;
}
.addmen{
  width: 350px;
  margin-left: 146px;
}

</style>
